<template>
  <div class="app">
    <h2>{{ msg }}</h2>
    <input type="text" v-model="msg" />
  </div>
</template>

<script setup lang="ts" name="App">
import { customRef, ref } from "vue";
import useMsgRef from "./useMsgRef";

// 使用vue默认提供的默认ref定义响应式数据，数据一变化，页面就更新
// let msg = ref("你好");

// 使用useMsgRef来定义一个响应式数据且有延迟效果
const { msg } = useMsgRef("你好", 1000);
</script>

<style scoped>
.app {
  background-color: #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10;
  padding: 10px;
}
button {
  margin: 5px;
}
</style>
